<div class="container my-lg-9 my-6">
  {%- for block in section.blocks -%}
    {%- liquid
      case block.settings.ratio
        when 'four_three_five'
          assign image_1_md_cols = 'col-md-4'
          assign image_2_md_cols = 'col-md-3'
          assign image_3_md_cols = 'col-md-5'
        when 'three_three_six'
          assign image_1_md_cols = 'col-md-3'
          assign image_2_md_cols = 'col-md-3'
          assign image_3_md_cols = 'col-md-6'
        when 'six_three_three'
          assign image_1_md_cols = 'col-md-6'
          assign image_2_md_cols = 'col-md-3'
          assign image_3_md_cols = 'col-md-3'
        when 'three_six_three'
          assign image_1_md_cols = 'col-md-3'
          assign image_2_md_cols = 'col-md-6'
          assign image_3_md_cols = 'col-md-3'
      endcase
    -%}
    <div class="row galleries-row">
      <div class="{{ image_1_md_cols }} col-12 galleries-cols">
        <a class="figure-hover h-100 position-relative"
          {% if block.settings.image_link_1 != blank %}
          {% render 'link', link: block.settings.image_link_1 %} 
          href="{{ block.settings.image_link_1 }}"{% endif %}>
          <figure class="img-wrapper h-100 mb-0 position-relative">
            {%- if block.settings.image_1 != nil -%}
              <picture class="ratio h-100 d-block position-relative"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image_1.aspect_ratio | times: 100 }}%;">
                {{ block.settings.image_1 | image_url: width: block.settings.image_1.width | image_tag: loading: 'lazy', class: 'object-fit-cover rounded-2', sizes: '(min-width: 1024px) 384px, (min-width: 600px) 220px, 282px', widths: '360, 480, 720, 960, 1200, 1920' }}
              </picture>
            {%- else -%}
              <div class="rounded-2 h-100 bg-gray-400">
                {{ 'collection-1' | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
              </div>
            {%- endif -%}
          </figure>
          <div class="galleries-name text-white position-absolute">
            <span class="d-block">{{ block.settings.name_1 }}</span>
          </div>
        </a>
      </div>
      <div class="{{ image_2_md_cols }} col-12 galleries-cols">
        <a class="figure-hover h-100 position-relative" 
          {% if block.settings.image_link_2 != blank %}
            {% render 'link', link: block.settings.image_link_2 %} 
            href="{{ block.settings.image_link_2 }}"{% endif %}>
          <figure class="img-wrapper h-100 mb-0 position-relative">
            {%- if block.settings.image_2 != nil -%}
              <picture class="ratio h-100 d-block position-relative"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image_2.aspect_ratio | times: 100 }}%;">
                {{ block.settings.image_2 | image_url: width: block.settings.image_2.width | image_tag: loading: 'lazy', class: 'object-fit-cover rounded-2', sizes: '(min-width: 1024px) 384px, (min-width: 600px) 220px, 282px', widths: '360, 480, 720, 960, 1200, 1920' }}
              </picture>
            {%- else -%}
              <div class="rounded-2 h-100 bg-gray-400">
                {{ 'collection-2' | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
              </div>
            {%- endif -%}
          </figure>
          <div class="galleries-name text-white position-absolute">
            <span class="d-block">{{ block.settings.name_2 }}</span>
          </div>
        </a>
      </div>
      <div class="{{ image_3_md_cols }} col-12 galleries-cols">
        <a class="figure-hover h-100 position-relative"
          {% if block.settings.image_link_3 != blank %}
          {% render 'link', link: block.settings.image_link_3 %} 
          href="{{ block.settings.image_link_3 }}"{% endif %}>
          <figure class="img-wrapper h-100 mb-0 position-relative">
            {%- if block.settings.image_3 != nil -%}
              <picture class="ratio h-100 d-block position-relative"
                style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image_3.aspect_ratio | times: 100 }}%;">
                {{ block.settings.image_3 | image_url: width: block.settings.image_3.width | image_tag: loading: 'lazy', class: 'object-fit-cover rounded-2', sizes: '(min-width: 1024px) 384px, (min-width: 600px) 220px, 282px', widths: '360, 480, 720, 960, 1200, 1920' }}
              </picture>
            {%- else -%}
              <div class="rounded-2 h-100 bg-gray-400">
                {{ 'collection-3' | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
              </div>
            {%- endif -%}
          </figure>
          <div class="galleries-name text-white position-absolute">
            <span class="d-block">{{ block.settings.name_3 }}</span>
          </div>
        </a>
      </div>
    </div>
  {%- endfor -%}
</div>
{% schema %}
  {
    "name": "Galleries",
    "class": "galleries",
    "tag": "section",
    "blocks": [
      {
        "type": "gallery",
        "name": "Gallery",
        "settings": [
          {
            "type": "select",
            "id": "ratio",
            "label": "Ratio",
            "options": [
              {
                "value": "four_three_five",
                "label": "4/3/5"
              },
              {
                "value": "three_three_six",
                "label": "3/3/6"
              },
              {
                "value": "six_three_three",
                "label": "6/3/3"
              },
              {
                "value": "three_six_three",
                "label": "3/6/3"
              }
            ],
            "default": "four_three_five"
          },
          {
            "type": "image_picker",
            "id": "image_1",
            "label": "Image 1"
          },
          {
            "type": "url",
            "id": "image_link_1",
            "label": "Image 1 link"
          },
          {
            "type": "text",
            "id": "name_1",
            "label": "Name 1"
          },
          {
            "type": "image_picker",
            "id": "image_2",
            "label": "Image 2"
          },
          {
            "type": "url",
            "id": "image_link_2",
            "label": "Image 2 link"
          },
          {
            "type": "text",
            "id": "name_2",
            "label": "Name 2"
          },
          {
            "type": "image_picker",
            "id": "image_3",
            "label": "Image 3"
          },
          {
            "type": "url",
            "id": "image_link_3",
            "label": "Image 3 link"
          },
          {
            "type": "text",
            "id": "name_3",
            "label": "Name 3"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Galleries"
      }
    ]
  }
{% endschema %}